<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="box">
    <div class="box-small">
        <div class="box-small-left"></div>
        <div class="box-small-right">
            <div class="box-title">
                <h2>Hi</h2>
                <h2>欢迎登录“知乎”的网页</h2>
            </div>
            <div style="width: 100%;margin-top: -12px;">
                <div id="login">
                    <span>密码登录</span>
                </div>
                <div id="register">
                    <span>注册账号</span>
                </div>
            </div>
            <div class="box-form">
                <div id="div-login" style="display: block;">
                    <form action="" method="">
                        <label>
                            <img src="../imgs/user-icon.png" alt="">
                            <input type="text" name="" id="phone1" value="" placeholder="手机号"/>
                        </label>
                        <label>
                            <img src="../imgs/password-icon.png" alt="">
                            <input type="password" name="" id="password" value="" placeholder=" 密码"/>
                        </label>
                        <button type="button" id="loginbtn">登录</button>
                    </form>
                </div>

                <div id="div-register" style="display: none;">
                    <form action="" method="">
                        <label>
                            <img src="../imgs/user-icon.png" alt="">
                            <input type="number" name="" id="phone" value="" placeholder="手机号注册"/>
                        </label>
                        <p id="phone-msg" style="width: 300px;margin: 10px auto;text-align: left;font-size: 10px"></p>
                        <label>
                            <img src="../imgs/password-icon.png" alt="">
                            <input type="password" name="" id="password1" value="" placeholder="设置密码"/>
                        </label>
                        <button type="button" id="registerbtn">注册</button>
                    </form>
                </div>
            </div>
            <div class="other">
                <div class="other-title">
                    <div class="title-line"></div>
                    <p>其他方式登陆</p>
                    <div class="title-line"></div>
                </div>
                <div class="other-list">
                    <ul>
                        <li>
                            <a href=""><img src="../imgs/list-qq.png"></a>
                            <span>第三方登陆</span>
                        </li>
                        <li>
                            <a href=""><img src="../imgs/list-weixin.png"></a>
                            <span>第三方登陆</span>
                        </li>
                        <li>
                            <a href=""> <img src="../imgs/list-weibo.png"></a>
                            <span>第三方登陆</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="box-footer">

    </div>

</div>


</body>
<script>
    $(function () {
        //点击注册按钮
        register();
        //点击登录按钮
        selectLogin();
        //鼠标划出选择手机号框
        selectPhone();
        css();
    })

    function css() {
        let login = $("#login");
        login.css("border-style", "solid");
        login.css("border-color", "#0d81e7");

        $("#login").on("click", function () {
            $("#div-login").css("display", "block");
            $("#div-register").css("display", "none");

            let login = $("#login");
            login.css("border-style", "solid");
            login.css("border-color", "#0d81e7");

            let register = $("#register");
            register.css("border-style", "");
            register.css("border-color", "");
        })
        $("#register").on("click", function () {
            $("#div-login").css("display", "none");
            $("#div-register").css("display", "block");

            let login = $("#login");
            login.css("border-style", "");
            login.css("border-color", "");

            let register = $("#register");
            register.css("border-style", "solid");
            register.css("border-color", "#0d81e7");
        })
    }

    function selectPhone() {
        let ophone = $("#phone");
        ophone.on("blur", function () {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/login?ac=selectPhone",
                type: "post",
                data: {
                    phone: ophone.val(),
                },
                dataType: "json",
                success: function (data) {
                    if (data.data) {
                        $("#phone-msg").html(data.msg);
                        $("#phone-msg").css("color", "red");
                    } else {
                        $("#phone-msg").html(data.msg);
                    }
                }
            })
        })
    }

    function selectLogin() {
        let ologinbtn = $("#loginbtn");
        let ophone1 = $("#phone1");
        let opassword = $("#password");
        ologinbtn.on("click", function () {
            $.ajax({
                async: true,
                url: "http://localhost:8080/zhihu1/login?ac=selectLogin",
                type: "post",
                data: {
                    phone1: ophone1.val(),
                    password: opassword.val(),
                },
                dataType: "json",
                success: function (data) {
                    if (data.msg == "登录成功") {
                        if(data.status != 2){
                            location.href = "../view/navigationbar.jsp"
                        }else {
                            alert("违规用户，不能登录！！！")
                        }
                    } else {
                        alert("账号或密码错误！！！")
                    }
                }
            })
        })
    }

    function register() {
        let oregisterbtn = $("#registerbtn");
        let ophone = $("#phone");
        let opassword1 = $("#password1");
        let phoneMsg = $("#phone-msg");
        oregisterbtn.on("click", function () {
            if (phoneMsg.html() == "手机号已被注册") {
                alert("手机号已被注册，请换一个手机号")
            } else {
                $.ajax({
                    async: true,
                    url: "http://localhost:8080/zhihu1/login?ac=insertUser",
                    type: "post",
                    data: {
                        phone: ophone.val(),
                        password1: opassword1.val(),
                    },
                    dataType: "json",
                    success: function (data) {
                        location.href = "login.jsp"
                    }
                })
            }
        })
    }
</script>
</html>